画像生成AIを使わずに、字幕が崩れない動画を作るためのキットです。
このページの指示文をコピーして、Claude Codeに貼るところから始めます。
このキットのサンプル動画（22.4秒）です。
このフォルダにある「サンプル動画」と同じ作り方で、動画を1本作ってください。 最初に、次のことを1つずつ私に質問してください。 ・何の動画か（テーマ）と、誰に見てもらうか ・長さ（秒）と、向き（横・縦・正方形） ・写真を使うか。使うなら、どのフォルダに入れたか ・ナレーションの音声ファイルがあるか 答えがそろったら、作る前に「何秒に、何を、どう動かすか」を1行ずつ書いた表（秒表）を見せて、私の確認を取ってください。 作るときの決まり ・画像生成AIや動画生成AIは使わず、絵を描くコードを書いて1コマずつ画像にし、MP4にする ・サンプル動画の scene.html と render.js を参考にする ・動きの種類は「弾むように出す」「1字ずつずらして出す」「画面全体をゆっくり拡大・縮小する」の3つまで ・最初の0.3秒で何かを動かす。最後は1〜2秒止める ・作ったら、0.5秒ごとの静止画を1枚に並べた「コマ一覧」を見せる ・必要な道具が足りないときは、入れる前に何を入れるのかを説明して、私の確認を取る
最初は、サンプル動画をそのまま書き出してみるのもおすすめです。
Claude Codeに「サンプル動画フォルダの動画を、MP4に書き出して」と頼むと、作り方の流れを一通り見られます。
下の見本は、すべてこのページのコードがいま描いています。
気に入った動きの「頼み方」をコピーして、指示文に足してください。
作りたい動画が決まっているなら、下の欄を埋めると指示文ができあがります。
入力した内容は、このパソコンのブラウザに残ります。
最初の行は「0秒」から始めます。分からなければ空欄のままで、Claude Codeに考えてもらえます。
| 秒 | 画面に出すもの |
|---|
「なんとなく変」より、何秒の行をどう変えるかで頼むと、直す場所がはっきりします。
2行目の文字を0.3秒早く出して
見出しを1.2倍にして、画面に2秒は残して
コマ一覧の◯秒目で文字が重なっているので、重ならない位置に動かして
締めの文字が出たあと、1.5秒止めて
同じ内容で、縦長の1080×1920も書き出して
締めの字幕を「◯◯」に変えて、その場面だけ書き出し直して
冒頭のサンプル動画は、この秒表で作りました。
| 秒 | 画面と動き | 音 |
|---|---|---|
| 0.0 | 「この動画で使った 画像生成AI」が1字ずつ起き上がる | 0.4秒からナレーション |
| 1.2 | 0.9〜1.2秒は止めてから、大きな「0」が弾むように出て「枚」が続く | 1.32秒に効果音 |
| 4.2 | 左でコードが打たれ、右に円が描かれ、下にコマが並ぶ | 4.4秒からナレーション |
| 8.8 | 「文字は、崩れない。」が出て、目盛りに四角が0.5秒ごとに立つ | 9.0秒からナレーション |
| 12.6 | 「声も、本人の声から。」と、声に合わせて伸びる波形 | 12.8秒からナレーション |
| 16.8 | 締めの画面。最後の2秒は止める | 17.0秒からナレーション |
動画にまとめるのに、Node.js・Playwright・ffmpegという無料の道具を使います。
入っていない場合は、Claude Codeに「動画を書き出すのに足りない道具と、入れ方を教えて」と聞いてください。
作れます。
使う道具（Claude Code・Node.js・Playwright・ffmpeg）は、どれもWindows 10・11に対応しています。
Windowsでは文字の書体が游ゴシックやメイリオに替わるので、できあがったコマ一覧で文字が重なっていないかを確かめてください。
サンプル動画を作るのにかかったのは、Claude Codeの利用料だけです。
Claude Codeが参考にするためのファイルです。
scene.html が絵を描くコード、render.js がコマを撮ってMP4にするコード、mix.wav がナレーションと効果音です。
開いたり書き換えたりしなくても使えます。